<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="600px" custom-class="mydialog" append-to-body @close="handleClose">
    <div class="dialog-content">
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="供应商：" >
          {{ dialog.supplierName }}
        </el-form-item>
        <el-table
          :data="tableData"
          border
          show-summary
          style="width: 100%"
          class="dialog-table">
          <el-table-column
            prop="skuName"
            label="商品名称"
            width="120"/>
          <el-table-column
            prop="amount"
            label="商城订单量"/>
          <el-table-column
            prop="amount1"
            label="需出货量">
            <template slot-scope="scope">
              {{ scope.row.amount - scope.row.outAmount }}
            </template>
          </el-table-column>

          <el-table-column
            prop="amount3"
            label="此次发货量">
            <template slot-scope="scope">
              <el-input v-model=" scope.row.currentOutAmount"/>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="物流公司：" >
          <el-select v-model="form.type" filterable placeholder="发货方式" class="seach-select" size="small">
            <el-option v-for="item in form.type_options" :key="item.expressCompanyId" :label="item.expressCompanyName" :value="item.expressCompanyId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号：" >
          <el-input v-model="form.number"/>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.remark" type="textarea" style="width:300px;"/>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button :disabled="btnEnable" class="greenbt" type="primary" @click="supplierSend()">确认出货</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getExpressCompanys, confirmShipment } from '@/api/pas/delivery'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '', show: true,
        supplierName: ''
      },
      form: {
        type_options: [], type: '', number: '', remark: ''
      },
      rules: {},
      tableData: [],
      search: {
        shipmentRecord: '',
        expressCompanyId: '',
        expressNumber: '',
        remark: ''
      },
      btnEnable: false
    }
  },
  mounted() {
    // 基本信息
    this.dialog.title = '供应商代发'
    this.tableData = this.modalData
    this.dialog.supplierName = this.tableData[0].supplierName
    // 快递公司
    getExpressCompanys()
      .then(response => {
        if (response.data.status === 'success') {
          this.form.type_options = response.data.data.list
        }
      })
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    // 发货
    supplierSend() {
      if (this.form.type === null || this.form.type === '' || this.form.number === null || this.form.number === '') {
        this.$message('快递信息不能为空！')
        return
      }
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].currentOutAmount === '0' || this.tableData[i].currentOutAmount === null || this.tableData[i].currentOutAmount === '') {
          this.$message('发货量不能为0或空！')
          return
        }
        if (isNaN(this.tableData[i].currentOutAmount)) {
          this.$message('发货量必须是数字！')
          return
        }
        var xc = this.tableData[i].amount * 1 - this.tableData[i].outAmount * 1
        if (parseInt(xc) < parseInt(this.tableData[i].currentOutAmount)) {
          this.$message('发货量不能大于需出货量！')
          return
        }
      }
      this.btnEnable = true
      this.search.shipmentRecord = JSON.stringify(this.tableData)
      this.search.expressCompanyId = this.form.type
      this.search.expressNumber = this.form.number
      this.search.remark = this.form.remark
      confirmShipment(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: response.data.messge
              // type: 'success'
            })
            this.handleClose()
          } else {
            this.btnEnable = false
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        }).finally(() => {
          this.modalStaticData.closeChildAndRefresh()
        })
    }

  }

}
</script>
